<!DOCTYPE html>
<html>
<head>
    <title>Console Logging Example</title>
</head>
<body>
    <p>View debugging messages to the right.</p>
    <script type="text/javascript">
        function log(message){                    
            var console = document.getElementById("debuginfo");
            if (console === null){
                console = document.createElement("div");
                console.id = "debuginfo";
                console.style.background = "#dedede";
                console.style.border = "1px solid silver";
                console.style.padding = "5px";
                console.style.width = "400px";
                console.style.position = "absolute";
                console.style.right = "0px";
                console.style.top = "0px";
                document.body.appendChild(console);
            }
            console.innerHTML += "<p>" + message + "</p>";
        }
        
        function sum(num1, num2){
            log("Entering sum(), arguments are " + num1 + "," + num2);
        
            log("Before calculation");
            var result = num1 + num2;
            log("After calculation");
        
            log("Exiting sum()");
            return result;
        }
        
        var result = sum(10, 23);

    </script>
</body>
</html>
